<template>
  <div class="main" >
    <div class="top">
      <div class="top-seach">
        <el-input style="height: 100%;width: 100%;" v-model="seachInput" placeholder="请输入内容或用户名" @keyup.enter="seachList">
        </el-input>
      <div class="seach" @click="seachList"></div>
    </div>
    <div class="top-right">
      <img class="fabu" src="../../assets/icon/fabu.png" @click="gofabu">
    </div>
    </div>

    <div class="list" ref="scrollContainer">
      
      <!-- <div style="height: 50px;background-color: violet;"></div> -->
      <div 
        class="boxsList"
        v-for="item,index in list" 
        :key="index">
        <div class="list-main">
          <div class="main-top">
            <div class="top-info">
              <div class="info-one">
                <img class="info-avatar" :src="item.avatar">
              </div>
              <div class="info-two">
                <div class="info-name">{{ item.name }}</div>
                <div class="info-status" v-if="item.isShow==1">🟢进行中</div>
                <div class="info-status" v-else="item.isShow==0">🔴已结束</div>
              </div>
              <div class="info-three">所需人数：<b>{{ item.activityNum }}</b></div>
              <div class="info-four">
                <div class="info-button" v-if="item.isjoin==0" @click="baomin(item.activityId)">报名活动</div>
                <div class="info-button" v-else="item.isjoin==1">已报名</div>
              </div>
            </div>
            <div class="top-time">
              <div class="time-start">
                <h5>开始时间</h5>
                <h6>{{ item.startTime }}</h6>
              </div>
              <div class="time-end">
                <h5>结束时间</h5>
                <h6>{{ item.endTime }}</h6>
              </div>
            </div>
          </div>
          <div class="main-button">
            <div class="button-left">
              <img :src="item.imageUrl" style="width: 100%;height: 100%;">
            </div>
            <div class="button-right">
              <div class="right-title">{{ item.title }}</div>
              <div class="right-content">{{ item.content }}</div>
              <div class="right-place">活动地点：{{ item.activityPlace }}</div>
            </div>
          </div>
        </div>
      </div>

      
    <div class="foot">
  <el-pagination
    v-model:currentPage="currentPage"
    :total="total"
    :page-size="pageSize"
    layout="total,prev, pager, next"
    @current-change="handleCurrentChange"
  />
    </div>
    </div>


  </div>

</template>

<script setup>
import { onMounted, ref } from 'vue'
import { useRouter } from 'vue-router'
import useCounter from '../../stores/pinia'
  import { parseJwt } from '../../stores/pinia'
import { ElMessage } from 'element-plus';
import {getActivityListAPI,getJoinActivityAPI} from '../../api/activity'
const counterStore=useCounter()
const currentPage=ref(1)
const total=ref(0)
const pageSize=ref(14)
const seachInput=ref("")
const router=useRouter()
const hoZhui=ref("?x-oss-process=video/snapshot,t_0,f_jpg")

const list = ref([
  // {
  //     activityId:1,
  //     avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //     name:'带泪的鱼',
  //     startTime:'2025-08-27 21:00:45',
  //     endTime:'2024-11-11 07:34:01',
  //     imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
  //     isShow:1,
  //     activityPlace:'深圳',
  //     activityNum:100,
  //     joinNum:30,
  //     title: '环保志愿活动',
  //     content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
  //   },
  //   {
  //     activityId:2,
  //     avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //     name:'七秒记忆',
  //     startTime:'2025-08-27 21:00:45',
  //     endTime:'2024-11-11 07:34:01',
  //     imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
  //     isShow:0,
  //     activityPlace:'深圳',
  //     activityNum:100,
  //     joinNum:30,
  //     title: '环保志愿活动',
  //     content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
  //   },
  //   {
  //     activityId:3,
  //     avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //     name:'张三fdfdgffuuu张三',
  //     startTime:'2025-08-27 21:00:45',
  //     endTime:'2024-11-11 07:34:01',
  //     imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
  //     isShow:1,
  //     activityPlace:'深圳',
  //     activityNum:100,
  //     joinNum:30,
  //     title: '环保志愿活动',
  //     content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
  //   },
  //   {
  //     activityId:4,
  //     avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //     name:'张三fdfdgffuuu张三',
  //     startTime:'2025-08-27 21:00:45',
  //     endTime:'2024-11-11 07:34:01',
  //     imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
  //     isShow:1,
  //     activityPlace:'深圳',
  //     activityNum:100,
  //     joinNum:30,
  //     title: '环保志愿活动',
  //     content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
  //   },
  //   {
  //     activityId:5,
  //     avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //     name:'张三fdfdgffuuu张三',
  //     startTime:'2025-08-27 21:00:45',
  //     endTime:'2024-11-11 07:34:01',
  //     imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
  //     isShow:0,
  //     activityPlace:'深圳',
  //     activityNum:100,
  //     joinNum:30,
  //     title: '环保志愿活动',
  //     content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
  //   },
  //   {
  //     activityId:6,
  //     avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //     name:'张三fdfdgffuuu张三',
  //     startTime:'2025-08-27 21:00:45',
  //     endTime:'2024-11-11 07:34:01',
  //     imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
  //     isShow:0,
  //     activityPlace:'深圳',
  //     activityNum:100,
  //     joinNum:30,
  //     title: '环保志愿活动',
  //     content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
  //   },
  //   {
  //     activityId:7,
  //     avatar:'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
  //     name:'张三fdfdgffuuu张三',
  //     startTime:'2025-08-27 21:00:45',
  //     endTime:'2024-11-11 07:34:01',
  //     imageUrl:'https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png',
  //     isShow:1,
  //     activityPlace:'深圳',
  //     activityNum:100,
  //     joinNum:30,
  //     title: '环保志愿活动',
  //     content: '本次活动将组织志愿者前往公园进行垃圾清理，共同为保护环境贡献力量。'
  //   },
  ]);

const userInfo=ref({})

const gofabu=()=>{
  if(counterStore.jwt==null){
    ElMessage({
  message: '您还没登录，请先前往登录',
  type: 'warning',
})
  }else{
    router.push('/activity/fabu')
  }
}


const baomin=async(activityId)=>{
  let params={
    userId:userInfo.value.id,
    activityId:activityId
  }
  const result=await getJoinActivityAPI(params)
  if(result.data.code==0){
    ElMessage.success('报名成功');
    getActivityList()
  }
}

const handleCurrentChange=()=>{
  // console.log("当前页码数为",currentPage.value)
   scrollToTop()
  getActivityList()
}

const seachList=async()=>{
// const result=await 
currentPage.value=1
getActivityList()
// let params={
//   pageNo:currentPage.value,
//   pageSize:pageSize.value,
//   sortBy:0,
//   searchTerms:seachInput.value
// }
// const result=await getPostListAPI(params)
// console.log("搜索到的数据",result.data.data)
// list.value=result.data.data.records
// total.value=result.data.data.total
// console.log(params)
// seachInput.value=""
}


  // 定义处理滚动事件的方法。
  const scrollContainer=ref(null)
const scrollToTop = () => {
  scrollContainer.value.scrollTo({top: 0});
}

const getActivityList=async()=>{
  let params={
    pageNo:currentPage.value,
    pageSize:pageSize.value,
    sortBy:0,
    searchTerms:seachInput.value,
    userId:userInfo.value.id
  }
  // console.log(params)
  const result=await getActivityListAPI(params)
  // console.log("活动列表",result.data.data.list)
  list.value=result.data.data.list
  total.value=result.data.data.total
  // console.log("帖子列表111",list.value)
}
onMounted(()=>{
  const jwt=counterStore.jwt
  if(jwt!=null){
      userInfo.value=parseJwt(jwt).claims
  }
  getActivityList()
   scrollToTop()
})
</script>

<style scoped>
.main{
  width: 100%;
  height: 100%;
  /* height: auto !important;
  height: 200px; */
  display: flex;
  /* background-color: rgb(205, 109, 50); */
  position: relative;
  /* position: absolute; */
  /* overflow: auto; */
  flex-direction: column;
  /* display: flex;
  flex-direction: row; */
}
.top{
  width: calc(100% - 250px);
  /* pointer-events: none; */
  /* background-color: yellowgreen; */
  /* position: relative; */
  display: flex;
  justify-content: center;
  /* flex-direction: ; */
  position: fixed;
}
.top-seach{
  width: 500px;
  height: 45px;
  /* background-color: rgb(241, 14, 14); */
  position: relative;
  /* display: flex; */
  /* justify-content: center; */
  /* align-items: center; */
  /* position: absolute; */
  border-radius: 20px;
  margin:20px 0 0 0;
  /* float: left; */
  /* left: 10px; */
}
:deep(.el-input__wrapper){
  /* background-color: rgb(250, 250, 250); */
  /* height: 100%; */
  border-radius: 20px;
}
:deep(.el-input__wrapper.is-focus){
  /* background-color: yellowgreen; */
  /* border-radius: 20px; */
  box-shadow: 0 0 0 1px rgb(2, 87, 121) inset;
}
.seach{
  width: 30px;
  height: 30px;
  /* float: left; */
  /* background-color: rgba(255, 0, 0, 0.342);  */
  position: absolute;
  border-radius: 20px;
  top:8px;
  right: 9px;
  background-image: url('../../assets/icon/seach-hover1.png');
  background-size: cover;
}
.seach:hover{
  background-image: url('../../assets/icon/seach.png');
}
.top-right{
width: 45px;
height: 45px;
/* background-color: rgb(50, 112, 205); */
border-radius: 50%;
position: absolute;
right: 40px;
top:20px
}
.top-right:hover{
background-color: #aaaaaa5e;
cursor: pointer;
}
.fabu{
width: 100%;
height: 100%;
/* background-color: yellow; */
}
.list{
  /* width:100%; */
  /* height: 100%; */
  /* display: flex; */
  /* position: absolute; */
  /* padding-top: 30px; */
  /* margin-top: 50px; */
  padding-top: 50px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  overflow: auto;
  /* margin: auto; */
  /* padding-right: calc((100% - 700px) / 2); */
  /* background-color: rgba(20, 141, 189, 0.717); */
}
.boxsList{
  width: 600px;
  height: fit-content;
  box-shadow: var(--el-box-shadow-light);
  overflow: hidden;
  background-color: rgb(240, 240, 240);
  margin-left: 45px;
  margin-top: 30px;
  /* overflow: hidden; */
  float: left;
  border-radius: 15px;
  /* background-image: url('../../../assets/icon/seach-hover.png'); */
}
.boxsList:hover{
  
  box-shadow: 10px 10px 16px rgba(0, 0, 0, 0.295);
}
.list-main{
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.main-top{
  width: 100%;
  height: fit-content;
  /* background-color: yellowgreen; */
  overflow: hidden;
  border-radius: 15px;
  margin-bottom: 4px;
  box-shadow: var(--el-box-shadow-light);
  display: flex;
  flex-direction: column;
  background-color: #ffffffe7;
}
.top-info{
  width: 100%;
  height: 70px;
  display: flex;
  flex-direction: row;
  border-bottom: 1px solid #474a5959;
  /* margin-bottom: 5px; */
  /* background-color: yellow; */
}
.info-one{
  width: 120px;
  height: 100%;
  /* background-color: yellowgreen; */
}
.info-avatar{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin-left: 38px;
  margin-top: 5px;
}
.info-two{
  width: 150px;
  height: 100%;
  /* background-color: violet; */
  display: flex;
  flex-direction: column;
  border-right: 1px solid #474a5959;
}
.info-name{
  width: 100%;
  height: 50%;
  /* background-color: blue; */
  display: flex;
  /* justify-content: center; */
  align-items: center;
}
/* .info-status{} */
.info-three{
  width: 150px;
  height: 100%;
  /* background-color: aqua; */
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #474a5959;
}
.info-four{
  width: 150px;
  height: 100%;
  /* background-color: blueviolet; */
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-button{
  width: 100px;
  height: 40px;
  background-color: #e6c7c7;
  cursor: pointer;
  font-size: larger;
  margin-left: 25px;
  font-weight: 600;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.info-button:hover{
  background-color: #caa7a7;
  color: #ffffffe7;
}
.top-time{
  width: 100%;
  height: 40px;
  /* background-color: blue; */
  display: flex;
  flex-direction: row;
}
.time-start{
  width: 50%;
  height: 100%;
  /* background-color: yellow; */
  padding-top: 5px;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #474a5959;
}
.time-end{
  width: 50%;
  height: 100%;
  /* background-color: rgb(0, 255, 42); */
  padding-top: 5px;
  display: flex;
  flex-direction: column;
}
h5{
  text-align: center;
}
h6{
  text-align: center;
  color: #636262e7;
}
.main-button{
  width: 100%;
  height: 400px;
  /* background-color: aquamarine; */
  box-shadow: var(--el-box-shadow-light);
  border-radius: 15px;
  margin-top: 1px;
  display: flex;
  flex-direction: row;
}
.button-left{
  width: 50%;
  height: 100%;
  /* background-color: violet; */
  box-shadow: var(--el-box-shadow-light);
  border-radius: 8px;
  overflow: hidden;
  margin-right: 6px;
  /* background-color: #c51f1fe7; */
}
.button-right{
  width: 50%;
  height: 100%;
  border-radius: 8px;
  box-shadow: var(--el-box-shadow-light);
  /* background-color: aqua; */
    background-color: #474a5959;
  display: flex;
  flex-direction: column;
  /* justify-content: center; */
  align-items: center;
}
.right-title{
  width: fit-content;
  height: fit-content;
  padding: 0 15px;
  /* margin: auto; */
  margin-top: 10px;
  padding: 10px 10px;
  border-radius: 8px;
  font-size: 23px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #dbd2d2ac;
}
.right-content{
  width: 90%;
  padding: 5px;
  margin-top: 10px;
  border-radius: 8px;
  height: fit-content;
  background-color: #dbd2d2ac;
}
.right-place{
  width: fit-content;
  padding: 5px;
  margin-top: 10px;
  max-width: 90%;
  height: fit-content;
  border-radius: 8px;
  background-color: #dbd2d2ac;
}
.foot{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: auto;
  margin-top: 30px;
  margin-bottom: 30px;
  /* background-color: rgb(50, 84, 205); */
}
:deep(.btn-prev){
  height: 1em;
  background-color: #ffffff00;
}
:deep(.number){
  height: 1em;
  /* color: yellowgreen; */
  background-color: #ffffff00;
}
:deep(.el-pager li.is-active,.el-pager li:hover){
  color: rgb(10, 27, 11);
}
:deep(.btn-next.is-last){
  height: 1em;
  background-color: #ffffff00;
}
:deep(button:disabled){
  height: 1em;
  background-color: #ffffff00;
}
:deep(.el-pagination){
  height: 1em;
  background-color: #ffffff00;
}
:deep(.more.btn-quickprev.el-icon){
  height: 1em;
  background-color: #ffffff00;
}
:deep(.more.btn-quicknext.el-icon){
  height: 1em;
  background-color: #ffffff00;
}
</style>